<template>
   <div id="largen">
       <h1>公司文化</h1>
       <h1>Corporate Culture</h1>
       <div id="box">
            <div
                v-for="(d,index) in diffusion"
                :key="index"
                class="vision"
            >
                <div class="vision-img" :style="{'background-image':'url('+d.path+')'}">
                    <div class="inner" :style="{'background-color':d.bgColor}"></div>
                </div>
                <div class="vision-txt">
                    <p style="font-size: 22px;font-weight: bold;">{{d.core}}</p>
                    <p class="des-txt">{{d.acceptance}}</p>
                </div>
            </div>
       </div>
   </div>
</template>

<script>
export default {
    name:'',
    props:[''],
    data () {
        return {
            // diffusion 扩散
            diffusion:[
                {
                    path:'/imgs/about/largen/about-vision.png',
                    bgColor:'rgba(63, 139, 233, 0.8)',
                    core:'愿景 • Vision',
                    acceptance:'打造全球著名的人才科技公司 、创办一所国际知名大学 、成为令人尊敬的企业'
                },
                {
                    path:'/imgs/about/largen/about-mission.png',
                    bgColor:' rgba(230, 120, 42, 0.8)',
                    core:'使命 • Mission',
                    acceptance:'让每个人都能公平和便利的获得优质教育服务，实现可持续职业成长'
                },
                {
                    path:'/imgs/about/largen/about-sense.png',
                    bgColor:'rgba(251, 127, 120, 0.8)',
                    core:'价值观 • Sense Of Worth',
                    acceptance:'只为赋能人才，知行合一，拥抱变化，建设性沟通，团队协作，勇于担当'
                },
                {
                    path:'/imgs/about/largen/about-manage.png',
                    bgColor:'rgba(150, 189, 83, 0.8)',
                    core:'管理理念 • Management Philosophy',
                    acceptance:'为员工提供良好的工作环境和激励机制；完善员工培养体系和职业发展通道,使员工与企业同步成长；充分尊重和信任员工，不断引导和鼓励，使其获得成就的喜悦'
                },
            ],
        };
    },
    components: {},
    mounted() {},
    methods: {},
}

</script>
<style scoped>
#largen{
    width: 1200px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 100px;
}
#box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: white;
}
.vision{
    width: 48%;
    height: 264px;
    margin-top: 40px;
    background-color: black;
    position: relative;
    cursor: pointer;
    border-radius: 2px;
}
.vision-img{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 0.4s;
    
}
.vision:hover .vision-img{
    width: 100%;
    height: 100%;
    transform: scale(100%,100%);
    border-radius: 0;
    background-size: 100% 100%;
}
.inner{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    transition: all 0.4s;
}
.vision:hover .inner{
    width: 580px;
    height: 264px;
    border-radius: 0;
    background: transparent !important;
    background-color: rgba(0, 0, 0, 0);
}
.vision-txt{
    width: 100%;
    position: absolute;
    top: 100px;
    text-align: center;
    transition: all 0.4s;
}
.des-txt{
    font-size: 14px;
    margin-top: 20px;
    padding: 0 50px;
    transition: all 0.3s;
}
.vision:hover .vision-txt{
    top: 120px;
}
.vision:hover .des-txt{
    opacity: 0;
}
</style>